var AssetEntryView = Backbone.View.extend({

	initialize : function() {
		this.render();
	},
	renderFlipButton : function() {
		var t = this;
		$('.switch', this.$el).each(function() {
			new FlipButton({
				el : this
			}).register(t);
		});
	},

	renderCombo : function() {
		var t = this;
		this.combos = [];

		var callbacks = [this.updateCategory,
				function() {
				}
		]
		
		for(var i in ViewData.asset.groups){
			ViewData.asset.combo[0].opts.push(i);
		}
		$('.combo', this.$el).each(function(i) {
			t.combos.push(new ComboBox({
				el : this,
				data : ViewData.asset.combo[i]
			}).register(t));

		});
	},
	setInput : function() {
		var t = this;
		if(this.op == undefined)
		this.op = $('.add-option', this.$el);
		if(this.btn == undefined)this.btn = $('.btn', this.$el);
		if(this.box == undefined)this.box = $('.search-box', this.$el); 
		//.children('input');
		if(this.inp == undefined){
			
		
			this.inp = $('.input-prepend > input', this.$el);

		}
		return this.setLine();
	},
	setLine: function(){
		if(this.line == undefined)
		this.line = this.options.line !== false || this.options.line === true || this.op.css('clear') == 'none';

		var op = this.op, inp = this.inp;
		var ow , iw;
		{
			var w1 = op.width();
			op.css({'width':''});
			$('.opt-view-port', op).css({'width':''});
			var w2 = op.width();
			ow = w2;			
		}
		if (this.line) {
			iw = inp.width();
			// if(iw-ow>180)
			iw=180;
			inp.width(iw+ow);
			inp.attr({
				'iw' : iw,
				'ow' : ow,
				'w' : iw,
			});			
		} else {
			iw = this.$el.width()
			- parseInt(this.box.css('margin-left'))
			- parseInt(this.box.css('margin-right'))
			- inp.position().left -10;
			// alert(this.$el.width())
			
			inp.width(iw);
		}
		op.attr({
			'w' : ow
		});
		$('.opt-view-port', op).css({
			'width' : ow + 'px'
		});
		if(!op.attr('show')){
			op.css({
				'overflow' : 'hidden',
				'width' : '0px'
			});	
		}else{
			inp.width(iw);
		}
		if(inp.attr('disabled')){
			if(this.line)
				inp.parent().hide();
			else inp.parent().show();
		}
		return this;	
	},
	render : function() {
		var t = this;

		var template = $("#search_template").html();
		this.$el.html(template);
		this.renderFlipButton();
		// this.renderSticky();
		this.renderCombo();
		this.setInput();
		this.setPopupMenu();
	},
	update: function(){
		this.setInput();
				
	},
	setPopupMenu : function() {
		
		this.tipsMenu = new PopupTipsMenu({
			el : $('.input-prepend', this.$el),
			collection : ViewData.asset.tips
		});
		
	},

	toggleControl : function(obj, w) {
		obj.op.width((100 - w) / 100 * obj.op.attr("w"));
		if (obj.line)
			obj.inp.width(parseInt(obj.inp.attr("w")) + w / 100 * obj.inp.attr("ow"));
	},

	setOverflow : function(obj, status) {
		// Start Clicking from flip button.
		//call entry defined at the html elements
		var search_icon = $('i', obj.inp.prev());
		if (status == '1') {// to Search
			if (obj.inp.attr('disabled')) { // original next button is issue, expand from 0
				if(obj.line){
					obj.inp.parent().show();
					obj.inp.attr({
						"w" : 0,
						"ow": parseInt(obj.inp.attr('iw'))+parseInt(obj.op.attr('w'))
					});							
				}
				obj.inp.attr('to-disable', 1);
				obj.inp.removeAttr('disabled');
			}
			else{
				if(obj.line){
					obj.inp.attr({
						"w" : obj.inp.attr('iw'),
						"ow": parseInt(obj.op.attr('w'))
					});	
				}					
			}
		
			obj.op.css({
				'overflow' : 'hidden'
			});
			obj.op.removeAttr('show');
			search_icon.removeClass('icon-plus').addClass('icon-search');
		} else {// to Add
			if (obj.inp.attr('to-disable')){// current is issue, shrink
				obj.inp.attr('disabled', 1);
				if(obj.line){
					obj.inp.attr({
						"w" : 0,
						"ow": parseInt(obj.inp.attr('iw'))+parseInt(obj.op.attr('w'))
					});
				}				
			}
			else{
				if(obj.line){
					obj.inp.attr({
						"w" : obj.inp.attr('iw'),
						"ow": parseInt(obj.op.attr('w'))
					});	
				}					
			}			obj.op.attr('show',1);

			search_icon.removeClass('icon-search').addClass('icon-plus');
		}

	},
	rmOverflow : function(obj, status) {
		//Clicked
		if (status == '0') { // to Add
			// obj.op.attr('show',1);
			obj.op.css('overflow', '');
			if(obj.line&&obj.inp.attr('to-disable'))
				obj.inp.parent().hide();
			obj.tipsMenu.stickyTag.hide();			
			// if (obj.inp.attr('disabled') == '0')
				// obj.inp.attr('disabled',1);//obj.inp.parent().css("visibility","hidden");
		}
	},
	toggleInput : function(obj, w) {
		if (obj.line)
			obj.inp.width(w / 100 * obj.inp.attr("w"));
	},
	setShow : function(obj, status) {
		if (status == '1') {
			if(obj.line){
				obj.inp.parent().show();
				obj.inp.attr({
					"w" : obj.inp.attr('iw')
				});			
			}	
			obj.inp.removeAttr('disabled');
			obj.inp.removeAttr('to-disable');
		}
	},
	setHide : function(obj, status) {
		if (status == '0') {//
			//obj.inp.parent().css("visibility","hidden");
			obj.inp.attr('disabled',1);
			if(obj.line){
				obj.inp.parent().hide();
				obj.inp.attr({
					"w" : 0,
				});
			}
		}
	},
	updateCategory : function(event, obj, data) {

		var html = "<option value=''></option>";
		if (!!data) {
			var arr = ViewData.asset.groups[data.selected];
			for (var i in arr) {
				html += "<option>" + arr[i] + "</option>";
			}
		}
		obj.combos[1].ui.html(html);
		obj.combos[1].ui.trigger("liszt:updated");

	},
	search : function() {

	}
}); 